@import "../include/css/functions";

#callout {
    background-image: url(../include/img/single_engine_edited.jpeg);
    background-position: center center;
}

@date-width: 25%;
@time-width: 9%;
@desc-width: 100% - @date-width - @time-width - 1%;
div.event {
    border-bottom: solid 1px rgba(0,0,0,.25);
    padding-bottom: 1em;
    margin-bottom: 1em;
    
    .date, .time, .desc {
        display: inline-block;
        vertical-align: text-top;
        margin: 0px;
        padding: 0px;
        color: rgba(0,0,0,.6);
        -webkit-transition: color .25s linear;
        line-height: 1.4em;
        font-size: .9em;
    }
    
    .date {
        width: @date-width;
        text-transform: uppercase;
        letter-spacing: -0.06em;
        font-weight: bold;
    }
    
    .time {
        width: @time-width;
    }
    
    .desc {
        width: @desc-width;
    }
}

.event:hover {
    .date, .time, .desc {
        color: rgba(0,0,0,.9);
    }
}

div.event:last-child {
    border-bottom: none;
    margin-bottom: 0px;
}

div.legend {
    border-bottom: solid 1px rgba(0,0,0,.75);
    
    .date, .time, .desc {
        font-size: @font-size;
        color: rgba(0,0,0,.8);
        text-transform: uppercase;
        font-weight: bold;
        line-height: 1em;
    }
}

div.legend:hover {
    .date, .time, .desc {
        color: inherit;   
        text-shadow: none;
    }
}